<!-- 页面模板部分，定义页面整体结构和元素渲染 -->
<template>
  <!-- 已完成页面根容器 -->
  <view class="over-pages">
    <!-- 搜索栏，当前处于注释状态 -->
    <!-- <view class="search-bar">
      <myInput v-model="searchTxt" @search="handleSearch" />
    </view> -->

    <!-- 分类标签区域 -->
    <view class="category-tabs">
      <!-- 商品网格布局 -->
      <view class="product-grid">
        <!-- 遍历 products 数组，渲染每个商品项，使用商品 id 作为唯一标识 -->
        <view class="product-item" v-for="item in products" :key="item.id"
          @click="goToDetail(item.id, item.verificationImg)">

          <!-- 商品信息区域 -->
          <view class="product-info">
            <!-- 价格和券信息区域 -->
            <view class="poc">
              <!-- 显示商品金额 -->
              <text class="product-title">￥{{ item.amount }}</text>
              <!-- 显示商品券类型 -->
              <text class="price1">{{ item.accountType }}券</text>
            </view>
          </view>
          <!-- 显示商品创建时间，使用格式化工具函数 -->
          <text class="tims">{{ formatTimestamp(item.create_time) }}</text>
        </view>
      </view>

      <!-- 当商品列表为空时，显示空状态组件 -->
      <empty v-if="products.length === 0"></empty>
    </view>
  </view>
</template>

<!-- 页面脚本部分，使用 TypeScript 和 Vue 3 的 setup 语法糖 -->
<script lang="ts" setup>
// 导入 Vue 相关的响应式和生命周期函数
import { onMounted, ref } from "vue";
// 导入 Taro 框架核心库
import Taro from "@tarojs/taro";
// 注释掉的旧图片路径，新路径从指定文件导入
// const pic = "https://cdn.tjkximg.com/content/zhangtang/images/mtjx.jpg";
import pic from "@/assets/imgs/photo.svg";
// 导入自定义输入框组件
import myInput from "@/components/my-input/index.vue";
// 导入 HTTP 请求工具
import http from "@/utils/http";
// 导入空状态组件
import empty from "@/components/empty/index.vue";
// 导入时间格式化工具函数
import { formatTimestamp } from "@/utils/tooler";

// 获取当前页面路由参数
const params = Taro.getCurrentInstance().router?.params;

// 设置页面导航栏标题为 "已完成"
Taro.setNavigationBarTitle({
  title: "已完成",
});

// 定义搜索框输入内容的响应式变量
const searchTxt = ref("");

// 定义分类标签列表的响应式变量，包含待核销、已核销、已取消等分类
const cates = ref([
  // {
  //   id: 0,
  //   name: "待支付",
  // },
  {
    id: 1,
    name: "待核销",
  },
  {
    id: 2,
    name: "已核销",
  },
  {
    id: 3,
    name: "已取消",
  },
]);

// 页面挂载时执行的逻辑，打印搜索框内容并更新订单列表
onMounted(() => {
  console.log("searchTxt", searchTxt.value);
  // http.postQuery(`/api/merchant/getOrder`, {}).then((res) => {
  //   console.log("res", res);
  // });
  updateOrder();
});

// 处理分类标签切换事件，更新当前激活标签并刷新订单列表
const handleTabChange = (e) => {
  console.log("e ---=", e);
  activeTab.value = e.paneKey;
  updateOrder();
};

// 更新订单列表的函数，根据业务类型调用不同的 API 获取订单数据
function updateOrder() {
  if (params?.business) {
    http.postQuery(`/api/merchant/getOrder`, { type: 4 }).then((res) => {
      console.log("res ==== 订单列表", res);
      products.value = res.data.map((i) => i.columns);
    });
  } else {
    http
      .postQuery(`/api/userOrder/getOrder`, { status: 3 })
      .then((res) => {
        console.log("res ==== 订单列表", res);
        products.value = res.data.map((i) => i.columns);
      });
  }
}

// 处理搜索事件的函数，打印搜索框内容
function handleSearch() {
  console.log("searchTxt", searchTxt.value);
}

// 定义商品数据的接口类型
interface Product {
  id: number;
  name: string;
  desc: string;
  price: number;
  sold: number;
  image: string;
}

// 定义当前激活的分类标签的响应式变量，默认值为路由参数中的 status 或 1
const activeTab = ref(params?.status || 1);
// 定义商品列表的响应式变量，类型为 Product 数组
const products = ref<Product[]>([]);

// 跳转到商品详情页的函数，携带商品 ID、图片和当前激活标签状态
function goToDetail(id: num, pic: string) {
  Taro.navigateTo({
    url: `/pages-detail/order/detail?id=${id}&pic=${encodeURIComponent(pic)}&status=${activeTab.value}`,
    events: {
      backEvent: function (data) {
        console.log(data);
        console.log("back 返回");
        updateOrder();
      },
    },
  });
}
</script>

<style lang="scss">
/* 页面样式部分，使用 SCSS 语法编写 */
.over-pages {
  // 设置页面底部内边距，避免内容被遮挡
  padding-bottom: 200rpx;
  // 设置页面背景颜色
  background-color: #f5f5f5;

  /* 单个商品项样式 */
  .product-item {
    width: 100%;
    padding: 10rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // 设置商品项底部边框
    border-bottom: solid 1px #eee;

    /* 时间显示样式 */
    .tims {
      color: #8d8d8d;
      font-weight: 500;
      font-size: 24rpx;
    }

    /* 商品图片样式 */
    .product-image {
      width: 100%;
      height: 350rpx;
      border-radius: 16rpx 16rpx 0 0;
    }

    /* 商品信息区域样式 */
    .product-info {
      background-color: #fff;
      padding: 20rpx;
      border-radius: 0 0 16rpx 16rpx;

      /* 价格和券信息区域样式 */
      .poc {
        display: flex;
        align-items: center;
        gap: 10rpx;
      }

      /* 商品标题样式 */
      .product-title {
        font-size: 32rpx;
        font-weight: 500;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 40rpx;
        color: #333;
      }

      /* 券信息样式 */
      .price1 {
        color: #fc761c;
        font-size: 20rpx;
        border: 1rpx solid #fc761c;
        padding: 6rpx 12rpx;
        border-radius: 4rpx;
      }

      /* 商品描述样式 */
      .product-desc {
        font-size: 24rpx;
        color: #999;
        margin: 10rpx 0;
        display: block;
        line-height: 34rpx;
      }

      /* 价格行样式 */
      .price-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 16rpx;

        // .price {
        //   color: #8d8d8d;
        //   font-weight: 500;
        //   font-size: 24rpx;
        // }

        /* 销量信息样式 */
        .sold {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }

  /* 搜索栏样式 */
  .search-bar {
    padding: 20rpx;
    background-color: #fff;
  }

  /* 分类标签区域样式 */
  .category-tabs {
    background-color: #fff;
    margin-bottom: 20rpx;
  }

  /* 商品网格布局样式 */
  .product-grid {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10rpx;
    box-sizing: border-box;

    .product-item {
      width: 100%;
      padding: 10rpx;
      box-sizing: border-box;

      .product-image {
        width: 100%;
        height: 350rpx;
        border-radius: 16rpx 16rpx 0 0;
      }
    }
  }
}

/* 标签页面板样式 */
.nut-tab-pane {
  padding: 12rpx;
}
</style>
